<template>
  <div>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <my-breadcrumb>内容管理</my-breadcrumb>
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
    </el-breadcrumb> -->
  </div>
  <!-- 上部的表单 -->
  <el-form ref="form" :model="form" label-width="80px">
    <!-- 使用 -->
    <my-status v-model="form.status" ></my-status>
    <!-- <el-form-item label="状态">
    <el-radio-group v-model="form.status">
        如果选择了全部，则将status设置为null,在发请求时，axios就是会自动忽略这个参数
            就不向后端传递
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
    </el-radio-group>
  </el-form-item> -->
  <!-- 频道 -->
   <!-- <el-form-item label="频道">
          <el-select v-model="form.region" placeholder="请选择频道">
            <el-option label="频道一" value="shanghai"></el-option>
            <el-option label="频道二" value="beijing"></el-option>
          </el-select>
   </el-form-item> -->
   <!-- // 3. 使用 -->
   <my-channel />
  <el-form-item label="日期">
    <el-date-picker
          v-model="form.dateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
    </el-date-picker>
</el-form-item>
  <!-- 查询按钮 -->
  <el-form-item>
    <el-button type="primary" @click="hSearch" :loading="isLoading">查询</el-button>
  </el-form-item>
</el-form>
</el-card>
<!-- 下部的表格 -->
<el-card style="margin-top:1em;">
  <div slot="header" class="clearfix">
    根据筛选条件查询到{{total_count}}条数据,当前是第{{curPage}}页：
  </div>
<el-table
        v-loading="isLoading"
        :data="articles"
        style="width: 100%">
        <el-table-column label="封面">
          <!-- 对于自定义模板列
          1. 不需要设置prop
          2. slot-scope="scope" 用来指定在template中可以通过scope来获取当前行的信息
              scope.row: 表示当前行的数据
              scope.row.cover.images[0] 表示这一行中的封面的地址
          -->
          <template slot-scope="scope">
            <!-- lazy懒加载效果 https://element.eleme.cn/#/zh-CN/component/image#lan-jia-zai -->
            <!-- <span>{{ scope.row.cover.images[0] }}</span> -->
            <!-- {{scope.row}} -->
            <el-image
            style="width: 100px; height: 100px"
             :src="scope.row.cover.images[0]">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="280">
      </el-table-column>
     <el-table-column
          label="状态">
          <template slot-scope="scope">
            <!-- 0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除 -->
            <!-- {{scope.row.status}} -->
            <el-tag v-if="scope.row.status===0">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="info">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
      <el-table-column
        prop="pubdate"
        label="发布时间">
      </el-table-column>
       <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button
         circle
         size="mini"
         type="primary"
          @click="hEdit(scope.$index, scope.row)"  icon="el-icon-edit"></el-button>
        <el-button
          circle
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="hDelete(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- 分页组件
    1. total是总条数。默认情况，它会以每页10条进行计算总页数
    2. current-change事件。当点击页码时，它会触发并会传入当前的页码。
    -->
    <el-pagination
                  :disabled="isLoading"
                  style="margin-top:10px;"
                  background
                  :page-size="10"
                  layout="prev, pager, next"
                  @current-change="hPageChange"
                  :total="total_count">
    </el-pagination>
    </el-card>
    </div>
    </template>

<script>
//  1. 导入组件
import MyChannel from '@/components/channel.vue'
import MyStatus from '@/components/status.vue'
export default {
  components: {
    // 2. 注册
    MyChannel,
    MyStatus
  },
  name: 'articleList',
  data () {
    return {
      form: {
        dateRange: null, // 表示一个时间区间
        date: null,
        status: null // 查询文章的状态，不传这个参数，就是全部
      },
      articles: [],
      total_count: 0, // 当前查询能查到的总条数
      curPage: 1, // 当前页码，默认第一页
      isLoading: false // 是否正在查询数据
    }
  },
  created () {
    this.loadArticles()
  },
  methods: {
    async loadArticles () {
      const { dateRange, status } = this.form
      // 1. 拼接查询参数
      const queryObj = {
        page: this.curPage,
        status
      }
      // 检查用户是否选择了日期区域
      if (dateRange) {
        // 当用户选择了日期区域之后，dateRange就是一个数组
        // 需要补充参数
        queryObj.begin_pubdate = dateRange[0]
        queryObj.end_pubdate = dateRange[1]
      }
      // 更改loading
      this.isLoading = true
      // 2.发ajax获取数据
      const res = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/articles',
        // 请求类型是get，参数会以查询字符串的格式附加在url地址栏中。
        // http://ttapi.research.itcast.cn/mp/v1_0/articles?page=100
        // params: 是axios中约定的名字。
        params: queryObj
      })
      // console.log(res)
      // 更新当前表格数据
      this.articles = res.data.data.results
      // 更新总页数
      this.total_count = res.data.data.total_count
      // 恢复loading状态
      this.isLoading = false
    },
    hSearch () {
      this.loadArticles()
    },
    // 跳转到编辑页面
    hEdit (index, row) {
      this.$router.push('/edit/' + row.id.toString())
    },
    async  doDelete (id) {
      // 发axios做删除
      try {
        const res = this.$http({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + id.toString()
        })
        // 1.提示
        this.$message.success('删除成功')
        console.log(res)
        // 2.重新加载数据
        this.loadArticles()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    hDelete (index, row) {
      console.log(index, row)
      // 1.让用户确认是否真的要删除
      // 问一下：是否要退出
      this.$confirm('你真的要删除吗？').then(() => {
        // 确定删除
        this.doDelete(row.id)
      }).catch(() => {
        // 取消退出，这里不要删除了。如果删除了，promise的结构就不完整了。
        // 当用户点了取消之后，就会报错误
      })
    },
    hPageChange (curPage) {
      // console.log(curPage)
    // todo: 发出请求....
      this.curPage = curPage
      this.loadArticles()
    }
  }
}

</script>

<style scoped lang="less">
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>
